Limitless - Color System
Overview
Custom colors system - a set of CSS classes that allow you to change colors on-the-fly directly in markup by changing class name. All colors correspond to Material design palette and includes 16 color palettes: 5 contextual (primary, danger, success, warning and info) and 11 alternative. The system is completely optional and moved to a separate colors.min.css minified CSS file.
Basically color system is supported by almost all layout elements and components: sidebar, navbar, content panels, links, text, icons, alerts, dropdown menus, form components, tables, tabs, progress bars, buttons, notifications, popovers, tooltips etc. The system consists of 16 color palettes, each palette includes 1 main color and 5 alternate colors that are darker and lighter than the main one.
Available color palettes:
- Primary palette
- Danger palette
- Success palette
- Warning palette
- Info palette
- Pink palette
- Violet palette
- Purple palette
- Indigo palette
- Blue palette
- Teal palette
- Green palette
- Orange palette
- Brown palette
- Grey palette
- Slate palette
Basic usage
Usage is very simple, all you need to do is to add one of the color CSS classes to the element. Limitless template includes a bunch of pages with color palette usage demonstration - in components, elements and layout parts. Depending on what part of element you want to change, available classes are (primary palette is an example):
| Class | Prefixes | Description |
|---|---|---|
| Background | ||
.bg-primary |
*-300, *-400, *-600, *-700, *-800 | Background color. Can be added to dropdown menus, sidebar, navbar, alerts, inputs, panels, selects etc. |
| Borders | ||
.border-primary |
*-300, *-400, *-600, *-700, *-800 | 4 sides border color. Any element that contains border |
border-top-primary |
Top border only. Any element that contains all sides border or top border only | |
border-bottom-primary |
Bottom border only. Any element that contains all sides border or bottom border only | |
border-left-primary |
Left border only. Any element that contains all sides border or left border only | |
border-right-primary |
Right border only. Any element that contains all sides border or right border only | |
| Text | ||
.text-primary |
*-300, *-400, *-600, *-700, *-800 | Text color. Can be used in text, icons and links |
| Alpha | ||
.alpha-primary |
none | Light background or text color. Useful when you need to use lighter color variations, in alerts for example |
Colors
Color system uses Material design palette colors with limitations: only 7 colors of 14 are used. I just tried to keep only main colors and drop unnecessary ones. Colored blocks below demonstrate all color codes and variables used in the template:
- 300 #64B5F6
- 400 #42A5F5
- 500 #2196F3
- 600 #1E88E5
- 700 #1976D2
- 800 #1565C0
- 300 #E57373
- 400 #EF5350
- 500 #F44336
- 600 #E53935
- 700 #D32F2F
- 800 #C62828
- 300 #81C784
- 400 #66BB6A
- 500 #4CAF50
- 600 #43A047
- 700 #388E3C
- 800 #2E7D32
- 300 #FF8A65
- 400 #FF7043
- 500 #FF5722
- 600 #F4511E
- 700 #E64A19
- 800 #D84315
- 300 #4DD0E1
- 400 #26C6DA
- 500 #00BCD4
- 600 #00ACC1
- 700 #0097A7
- 800 #00838F
- 300 #F06292
- 400 #EC407A
- 500 #E91E63
- 600 #D81B60
- 700 #C2185B
- 800 #AD1457
- 300 #BA68C8
- 400 #AB47BC
- 500 #9C27B0
- 600 #8E24AA
- 700 #7B1FA2
- 800 #6A1B9A
- 300 #9575CD
- 400 #7E57C2
- 500 #673AB7
- 600 #5E35B1
- 700 #512DA8
- 800 #4527A0
- 300 #7986CB
- 400 #5C6BC0
- 500 #3F51B5
- 600 #3949AB
- 700 #303F9F
- 800 #283593
- 300 #4FC3F7
- 400 #29B6F6
- 500 #03A9F4
- 600 #039BE5
- 700 #0288D1
- 800 #0277BD
- 300 #4DB6AC
- 400 #26A69A
- 500 #009688
- 600 #00897B
- 700 #00796B
- 800 #00695C
- 300 #AED581
- 400 #9CCC65
- 500 #8BC34A
- 600 #7CB342
- 700 #689F38
- 800 #558B2F
- 300 #FFB74D
- 400 #FFA726
- 500 #FF9800
- 600 #FB8C00
- 700 #F57C00
- 800 #EF6C00
- 300 #A1887F
- 400 #8D6E63
- 500 #795548
- 600 #6D4C41
- 700 #5D4037
- 800 #4E342E
- 300 #999
- 400 #888
- 500 #777
- 600 #666
- 700 #555
- 800 #444
- 300 #90A4AE
- 400 #78909C
- 500 #607D8B
- 600 #546E7A
- 700 #455A64
- 800 #37474F
LESS and CSS
Color system includes 2 source LESS files - colors.less and palette.less located in assets/less/core/colors/ folder. The first one includes class names and styles for them: background, borders, text and alpha colors. The second one includes list of all color variables.
Less folder root contains one more colors.less file. This file is needed for colors.min.css CSS file compile. Basically it includes paths to main LESS files, so when you compile CSS files, use this file:
// Core
// ------------------------------
// Import variables and mixins
@import "bootstrap/variables.less";
@import "bootstrap/mixins.less";
// Import overrides
@import "core/variables/variables.less";
@import "core/variables/core-variables.less";
// Color system, always load last
// ------------------------------
// Color palettes
@import "core/colors/palette.less";
// System itself
@import "core/colors/colors.less";
If you want to use color system in your project, i suggest to use minified colors.min.css file included to the package, since basically this file won't be changed often, except if you may want to change colors in palette.less file. But if you don't want to use the system, feel free to remove compiled CSS file, but don't remove any paths to palette.less file in any LESS files, because color variables are used in different components and layout options.